<template>
  <div>
    <a-modal
      :open="open"
      width="640px"
      destroy-on-close
      title="输入域"
      :ok-button-props="{ disabled: !isCompleted }"
      ok-text="保存"
      centered
      @ok="onOk"
      @cancel="onCancel"
    >
      <a-form :model="formState" class="form-style-flex mt-3" :label-col="{ style: { width: '120px' } }">
        <a-form-item label="名称（Name）" class="w-1/2" v-bind="validateInfos.dictName">
          <!-- <SelectTable
            v-model:value="formState.dictName"
            type="电子病历下拉列表"
            custom-input
            placeholder="请输入"
            @select="onSelect"
            @input-change="getPinyin"
          /> -->
          <a-input v-model:value="formState.dictName" placeholder="请输入" @change="getPinyin" @blur="onNameBlur" />
        </a-form-item>
        <a-form-item label="编号" class="w-1/2" v-bind="validateInfos.dictCode">
          <a-input v-model:value="formState.dictCode" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="助记码" class="w-1/2">
          <a-input v-model:value="formState.zjm" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="背景文字" class="w-1/2">
          <a-input v-model:value="formState.backgroundText" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="单位文本" class="w-1/2">
          <a-input v-model:value="formState.unitText" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="描述" class="w-full">
          <a-textarea v-model:value="formState.memo" :rows="4" placeholder="请输入" class="w-full" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:open', 'success'])
const formState = ref({})
const tableData = ref([])
const rulesState = ref({
  dictName: [{ required: true, message: '请输入名称' }],
  dictCode: [{ required: true, message: '请输入编号' }]
})
const { isCompleted, resetFields, validateInfos } = useForm(formState, rulesState)
// const onSelect = (select) => {
//   formState.value = select
//   tableData.value = select.dictItems.map((item) => ({ key: item.id, ...item }))
//   !select.zjm && getPinyin()
// }

const getPinyin = async () => {
  const { data, code } = await post('/common/util/getPinyin', { name: formState.value.dictName })
  code === 0 && (formState.value.zjm = data)
}
const onOk = async () => {
  await resetFields()
  emit('success', {
    ...formState.value,
    dictItems: tableData.value
  })
}
const onCancel = () => {
  emit('update:open', false)
  formState.value = {}
  resetFields()
}
const onNameBlur = (val) => {
  if (val.target.value) {
    formState.value.backgroundText = '请输入' + val.target.value
  }
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = {}
      resetFields()
    }
  }
)
</script>
